<template>
    <div>
        <Table :columns="columns" :data="tableData"></Table>

        <div class="text-center margin-top-10">
            <Page 
            :current="pagination.current" 
            show-total
            :page-size="pagination.limit" 
            :total="pagination.total" 
            @on-change="initData"></Page>
        </div>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
import { date, deviceType } from '@/filters'

export default {
  name: 'merchant-teardown',
  data () {
    return {
      tableData: [],
      pagination: {
        current: 1,
        total: 1,
        limit: 10
      },
      columns: [
        { title: '设备SN', key: 'sn' },
        { title: '设备类型', render: (h, p) => <span>{deviceType(p.row.device_type)}</span> },
        { title: '产品型号', key: 'product_name' },
        { title: '设备型号', key: 'model' },
        {
          title: '城市/区县',
          render: (h, p) => (
            <span>
              {p.row.city} {p.row.district}
            </span>
          )
        },
        { title: '原房源地址', key: 'address', minWidth: 200 },
        { title: '原房间号', key: 'room_name' },
        {
          title: '保修期',
          render: (h, p) => (
            <div>
              <div>{p.row.guarantee_begin}</div>
              <div>{p.row.guarantee_end}</div>
            </div>
          )
        },
        { title: '拆回时间', render: (h, p) => <span>{date(p.row.updated_at, 'YYYY-MM-DD HH:mm')}</span> }
      ]
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      this.loading = true
      const { page, limit } = this.pagination
      const params = {
        limit,
        state: 6,
        // client_id: this.$route.params.id,
        offset: (page - 1) * limit
      }
      const res = await http.fetch(this, api.devices_list, null, params)
      if (res) {
        this.tableData = res.device_states
        this.pagination.total = res.count
      }
      this.loading = false
    }
  }
}
</script>